import {useState} from "react";
import {Image, View,Input} from "@tarojs/components";
import Taro, {useLoad} from '@tarojs/taro'
import './index.scss'
import MapPin from "../../components/svg/map-pin.svg";
import Users from "../../components/svg/users.svg";
import Search from "../../components/svg/search.svg";
import Filter from "../../components/svg/filter.svg";
import Filter2 from "../../components/svg/filter2.svg";
import {getRequest} from "../../util/request";
import categoryMap from "../../util/categoryMapping";

export default function Index() {

  const [trainList, setTrainList] = useState<any[]>([]);
  const [filter, setFilter] = useState<boolean>(false);
  const [currTag, setCurrTag] = useState<string>('全部');
  const [seaarchText, setSeaarchText] = useState<string>('');
  const [allTag, setAllTag] = useState<string[]>(['全部']);

  const gotoPage = (id) => {
    Taro.navigateTo({url: `/pages/traindetail/index?trainId=${id}`});
  }

  useLoad((param) => {
    console.log('训练分类查询页面加载',param)
    queryList(param.category)
    Taro.setNavigationBarTitle({title: param.categoryName})
  })

  const queryList = (category) => {
    getRequest('/bsTrain/list?category='+category,  res=> {
      setTrainList(res.data.map(item => {
        return {
          id: item.id,
          title: item.title,
          location: item.place,
          date: item.startDate,
          views: item.views,
          category: item.category,
          categoryName: categoryMap[item.category],
          participants: item.participants,
          image: item.cover,
          tags: item.tags?item.tags.split(',').filter(t => t !== ''):[],
        }
      }))
    })
  }

  const getActiveStyle3 = (tag: string) => {
    if (tag == currTag) {
      return {
        'backgroundColor': '#3376F2',
        'color': '#fff',
      }
    } else {
      return {}
    }
  }

  const activeTag = (tag: string) => {
    setCurrTag(tag)
  }

  return (
    <View className=''>
      <View className='search-view'>
        <Image className='search-icon' src={Search} />
        <Input type='text' placeholder='搜索活动名称' className='search-input' onInput={e => setSeaarchText(e.detail.value)} />
        <View className='icon-view' style={{backgroundColor: filter ? '#3376F2' : '#F9FAFB'}} onClick={() => {
          setAllTag(['全部'])
          setCurrTag('全部')
          trainList.forEach(item => {
            setAllTag(prev => [...prev, ...item.tags])
          })
          setAllTag(prev => [...new Set([...prev])])
          setFilter(!filter)
        }}
        >
          <Image src={filter ? Filter2 : Filter} className='icon4' />
        </View>
      </View>
      {filter &&
        (<View className='media-type-view'>
          {allTag.filter(t => t !== '').map((tag,i) => (
            <View className='type-tag' key={tag+'_'+i} style={getActiveStyle3(tag)} onClick={() => {
              activeTag(tag)
            }}
            >{tag}</View>
          ))}
        </View>)
      }
      <View className='list-container'>
        {trainList
          .filter(train => seaarchText == '' || train.title.includes(seaarchText))
          .filter(train => (filter && (currTag == '全部' || train.tags.includes(currTag))) || !filter).map((train, index) => (
          <View className='card' key={index} onClick={() => gotoPage(train.id)}>
            <Image className='card-image' src={train.image} />
            <View className='card-title'>{train.title}</View>
            <View className='card-description'>
              <Image src={MapPin} className='map-pin' />{train.location}
              <View className='date'>{train.date}</View>
            </View>
            <View className='category'>{train.categoryName}</View>
            <View className='persons'><Image src={Users} className='avatar1' />{train.participants}</View>
            <View className='views'>{train.views}浏览</View>
            <View className='m-tagview'>
              {train.tags.map(tag => (<View key={tag} className='m-tags'>{tag}</View>))}
            </View>
          </View>
        ))}
      </View>
      <View className='page-bottom'></View>
    </View>
  )
}
